<template>
  <div class="preson">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Preson">
  import {ref,reactive,toRefs} from 'vue';
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })

  let {name,age}= toRefs(person)
  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
</script>
<style scoped>
.preson {
  background-color: skyblue;
  box-shadow: 0 0 10px 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
